<script setup lang="ts">
import myCom from '@/components/myCom.vue';
import { ref } from 'vue';
import { useUserStore } from '@/stores/user';
const user=useUserStore()

import { useRouter } from 'vue-router';

const userid = user.userid

const router = useRouter()
//退出登录
function logOutClick() {
  user.changeUserState({
    token: '',
    userid: '',
    isLogin: false
  })
  router.push('/')
}
//我的地址
import { defaultAddressFn } from '@/api/address'
const token = user.token
function addressClick() {
  console.log(156789);
  router.push('/address')
  // defaultAddressFn({

  //   userid, header:{token:token}
  // }).then(res=>{
  //   console.log(222222222222,res);

  // })
}
//修改密码
const show = ref(false);
function xiugai() {
  show.value = true;
}
</script>

<template>
  <main class="box">
    <header class="header">头部-我的</header>
    <div class="content">
      <van-skeleton :loading="false">
        <template #template>
          <div :style="{ display: 'flex', width: '100%' }">
            <van-skeleton-image />
            <div :style="{ flex: 1, marginLeft: '16px' }">
              <van-skeleton-paragraph row-width="60%" />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
            </div>
          </div>
        </template>

        <myCom></myCom>
      </van-skeleton>
      <!-- <section>
        <img src="@/assets/jizai.png" style="width: 16%;border-radius: 50%;" />
        <div class="userInfo">
          <span>用户名： {{ userid ? userid : '游客' }}</span>
          <div>
            <van-button type="primary" v-if="user.isLogin" size="small" @click="logOutClick">退出登陆</van-button>
            <van-button type="primary" v-else="!user.isLogin" @click="$router.push('/login')">未登陆</van-button>
          </div>
        </div>
      </section> -->
      <van-cell-group style="margin-top: 16px;">
        <van-cell @click="addressClick" title="我的地址" value="" is-link />
        <van-cell @click="$router.push('/douyu')" title="斗鱼跨域接口" value="" is-link />
        <van-cell @click="xiugai" title="修改密码" value="" is-link />
        <van-popup v-model:show="show" :style="{ padding: '64px' }">
          <h3>修改密码</h3>
          <van-field type="password" name="原密码" label="原密码" placeholder="原密码"
            :rules="[{ required: true, message: '请填写原密码' }]" />
          <van-field type="password" name="新密码" label="新密码" placeholder="新密码"
            :rules="[{ required: true, message: '请填写新密码' }]" />
          <div style="margin: 16px;" >
            <van-button round block type="primary" native-type="submit" >
              提交
            </van-button>
          </div>
        </van-popup>
        <van-cell title="我的订单" value="" label="" is-link />

      </van-cell-group>
      <div>
        <van-button style="width: 100%;" type="primary" v-if="user.isLogin" size="small"
          @click="logOutClick">退出登陆</van-button>
        <van-button style="width: 100%;" type="primary" v-else="!user.isLogin"
          @click="$router.push('/login')">未登陆</van-button>
      </div>
    </div>
  </main>
</template>
<style lang="scss" scoped>
.content {
  padding: 10px;

  .van-skeleton {
    margin-top: 10px;
  }
}
</style>